/*
 * @Author: your name
 * @Date: 2022-03-19 14:32:01
 * @LastEditTime: 2022-03-21 17:27:56
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \zdyf-home-page\src\pages\thirtyApp\style.js
 */
import style from 'styled-components';

import biankaung from '../../assets/img/外框928_219@2x.png'

import optimizedontrolOne from '../../assets/img/AppIcon/优化控制/新建文件夹/协同操作优化.png'
import optimizedontrolTwo from '../../assets/img/AppIcon/优化控制/新建文件夹/模型预测控制.png'
import optimizedontrolThire from '../../assets/img/AppIcon/优化控制/新建文件夹/自适应PID控制.png'
import optimizedontrolFour from '../../assets/img/AppIcon/优化控制/新建文件夹/APC性能监控.png'
import optimizedontrolFive from '../../assets/img/AppIcon/优化控制/新建文件夹/多回路参数整定.png'
import optimizedontrolSix from '../../assets/img/AppIcon/优化控制/新建文件夹/PID性能评估.png'

import ProductionControlOne from '../../assets/img/AppIcon/生产管控/新建文件夹/数据预处理.png'
import ProductionControlTwo from '../../assets/img/AppIcon/生产管控/新建文件夹/数据计算分析.png'
import ProductionControlThire from '../../assets/img/AppIcon/生产管控/新建文件夹/装置收率模型.png'
import ProductionControlFour from '../../assets/img/AppIcon/生产管控/新建文件夹/生产统计模型.png'
import ProductionControlFive from '../../assets/img/AppIcon/生产管控/新建文件夹/生产调度优化.png'
import ProductionControlSix from '../../assets/img/AppIcon/生产管控/新建文件夹/绩效考核管理.png'

import EquipmentMaintenanceOne from '../../assets/img/AppIcon/设备运维/新建文件夹/设备状态监测预警.png'
import EquipmentMaintenanceTwo from '../../assets/img/AppIcon/设备运维/新建文件夹/设备运行能效分析.png'
import EquipmentMaintenanceThire from '../../assets/img/AppIcon/设备运维/新建文件夹/故障定位分析.png'
import EquipmentMaintenanceFour from '../../assets/img/AppIcon/设备运维/新建文件夹/设备备件管理.png'
import EquipmentMaintenanceFive from '../../assets/img/AppIcon/设备运维/新建文件夹/设备检修维护.png'
import EquipmentMaintenanceSix from '../../assets/img/AppIcon/设备运维/新建文件夹/设备智能巡检.png'

import energyManagementOne from '../../assets/img/AppIcon/能源管控/新建文件夹/能源供需平衡.png'
import energyManagementTwo from '../../assets/img/AppIcon/能源管控/新建文件夹/能效指标管理.png'
import energyManagementThire from '../../assets/img/AppIcon/能源管控/新建文件夹/能源平衡优化.png'
import energyManagementFour from '../../assets/img/AppIcon/能源管控/新建文件夹/能源分析预测.png'
import energyManagementFive from '../../assets/img/AppIcon/能源管控/新建文件夹/加热炉热效率优化.png'
import energyManagementSix from '../../assets/img/AppIcon/能源管控/新建文件夹/能源管理调度.png'

import environmentalProtectionOne from '../../assets/img/AppIcon/安全环保/新建文件夹/风险评估模型.png'
import environmentalProtectionTwo from '../../assets/img/AppIcon/安全环保/新建文件夹/应急预案管理.png'
import environmentalProtectionThire from '../../assets/img/AppIcon/安全环保/新建文件夹/事故模拟演练.png'
import environmentalProtectionFour from '../../assets/img/AppIcon/安全环保/新建文件夹/重大危险源管理.png'
import environmentalProtectionFive from '../../assets/img/AppIcon/安全环保/新建文件夹/环保在线监测.png'
import environmentalProtectionSix from '../../assets/img/AppIcon/安全环保/新建文件夹/互联网智能监管.png'

export const Contain = style.div`
    width:100%;
    height:100%;
    // margin-top:16px;
    // margin-left:28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;

    .fiveClass{
        width:100%;
        height:18%;
        position:relative;
        background: url(${biankaung});
        background-size: cover;
        background-repeat: no-repeat;
        magrin-bottom:6px;
        .title{
            width:111px;
            height:15px;
            position:absolute;
            top:5px;    
            left:20px;
            text-align:center;
            color:#47CCFF;
            font-size: 15px;
            font-family: YouSheBiaoTiHei;
            letter-spacing: 0;
            text-shadow: 0 0 2px rgba(0,18,38,0.79);
            font-weight: 400;
        }
        .content{
            display: flex;
            justify-content:space-around;
            width: 100%;
            height: 80px;
            position: absolute;
            bottom: 5px;
            left: 0;
            .son{
                width:18%;
                height: 80px;
                // background-color:green;
                display:flex;
                flex-direction: column;
                justify-content:center;
                align-items: center;
                font-family: PingFangSC-Regular;
                font-size:10px;
                color: #FFFFFF;
                letter-spacing: -0.17px;
                text-align: center;
                font-weight: 400;
                overflow: hidden;

                .backgroubnd{
                    width: 65%; 
                    height: 60px;
                    margin-bottom:5px ;
                    border-radius:2px
                    /* background-size: contain;
                    background-repeat: no-repeat; */
                }
                .optimizedontrolOne{
                    background: url(${optimizedontrolOne});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .optimizedontrolTwo{
                    background: url(${optimizedontrolTwo});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .optimizedontrolThire{
                    background: url(${optimizedontrolThire});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .optimizedontrolFour{
                    background: url(${optimizedontrolFour});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .optimizedontrolFive{
                    background: url(${optimizedontrolFive});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .optimizedontrolSix{
                    background: url(${optimizedontrolSix});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .ProductionControlOne{
                    background: url(${ProductionControlOne});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .ProductionControlTwo{
                    background: url(${ProductionControlTwo});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .ProductionControlThire{
                    background: url(${ProductionControlThire});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .ProductionControlFour{
                    background: url(${ProductionControlFour});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .ProductionControlFive{
                    background: url(${ProductionControlFive});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .ProductionControlSix{
                    background: url(${ProductionControlSix});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .EquipmentMaintenanceOne{
                    background: url(${EquipmentMaintenanceOne});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .EquipmentMaintenanceTwo{
                    background: url(${EquipmentMaintenanceTwo});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .EquipmentMaintenanceThire{
                    background: url(${EquipmentMaintenanceThire});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .EquipmentMaintenanceFour{
                    background: url(${EquipmentMaintenanceFour});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .EquipmentMaintenanceFive{
                    background: url(${EquipmentMaintenanceFive});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .EquipmentMaintenanceSix{
                    background: url(${EquipmentMaintenanceSix});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .energyManagementOne{
                    background: url(${energyManagementOne});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .energyManagementTwo{
                    background: url(${energyManagementTwo});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .energyManagementThire{
                    background: url(${energyManagementThire});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .energyManagementFour{
                    background: url(${energyManagementFour});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .energyManagementFive{
                    background: url(${energyManagementFive});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .energyManagementSix{
                    background: url(${energyManagementSix});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .environmentalProtectionOne{
                    background: url(${environmentalProtectionOne});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .environmentalProtectionTwo{
                    background: url(${environmentalProtectionTwo});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .environmentalProtectionThire{
                    background: url(${environmentalProtectionThire});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .environmentalProtectionFour{
                    background: url(${environmentalProtectionFour});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .environmentalProtectionFive{
                    background: url(${environmentalProtectionFive});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .environmentalProtectionSix{
                    background: url(${environmentalProtectionSix});
                    background-size: contain;
                    background-repeat: no-repeat;
                }
                .appName{
                    width: 100%;
                    height: 10px;
                }
            }
            
        }
    }
`